<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
        }

        .box1 {
            background: yellow;
        }

        .box2 {
            background: blue;
        }

        .box3 {
            background: red;
        }
    </style>
</head>

<body>
    <button>按钮一</button><button>按钮二</button><button>按钮三</button>
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">2</div>
    <script>
        // {
        //     let a  = 10;
        //     console.log(a);
        // }


        // var a = 10;
        // var a = 20;
        var btns = document.querySelectorAll("button");
        var divs = document.querySelectorAll("div");
        // for(var i=0;i<btns.length;i++){
        //     btns[i].index = i;
        //     btns[i].onclick = function(){
        //         // console.log(this.index);
        //         // 让所有的div 隐藏
        //         for(var j=0;j<divs.length;j++){
        //             divs[j].style.display = "none";
        //         }
        //         // 让指定（点击）的div显示
        //         divs[this.index].style.display = "block";
        //     }
        // }

        // 闭包写法
        for (var i = 0; i < btns.length; i++) {
            btns[i].index = i;
            (function (i) {
                btns[i].onclick = function () {
                    console.log(i);
                    // console.log(this.index);
                    // 让所有的div 隐藏
                    for (var j = 0; j < divs.length; j++) {
                        divs[j].style.display = "none";
                    }
                    // 让指定（点击）的div显示
                    divs[this.index].style.display = "block";
                }
            })(i)

        }



        // 闭包：函数内部可以访问函数上下文的变量
        // var a  = 10;
        // function test(){
        //     console.log(a);
        // }

        // function test(){
        //     // var a = 10;
        //     var judge = false ;  //换成函数是否执行的结果
        //     return function(fn){
        //         if(!judge){
        //             fn();
        //             judge = true;
        //         }else{
        //             console.log("已经执行过了");
        //         }
        //     }
        // }
        // // 会吧judge 通过闭包缓存起来 
        //  function fn() {
        //     console.log("fn");
        // }
        // var mytest = test();
        // mytest(fn);
        // mytest(fn);
        // mytest(fn);





    </script>
</body>

</html>